<!-- eslint-disable vue/multi-word-component-names -->
<!--
  zzh speaking:


  作用 el-form 中的 el-form-item组件内
  当使用该组件  代替<el-form-item> 时，增加提示信息功能，延用原组件所有功能

  *NOTE Sprops说明：
  label?: string  --标题文本
  remark?: string -- 提示信息
  placement?: Placement --位置
  icon?: object  默认 MagicStick
-->


<template>
  <el-form-item v-bind="$attrs">   <!--  $attrs 说明沿用 原属性 -->
    <template #label>
      <span v-if="label" class="label-container">
        {{ label }}
        <el-tooltip
          v-if="remark"
          :content="remark"
          placement="top"
        >
          <!-- <el-icon class="tip-icon"><component :is="icon" /></el-icon> -->
           <span style="font-size: xx-small; margin-bottom: 5px; color: #0180A5;">?</span>
        </el-tooltip>
      </span>
    </template>
    <slot />
  </el-form-item>
</template>

<script setup lang="ts">
import { MagicStick } from '@element-plus/icons-vue'

withDefaults(defineProps<{
  label?: string
  remark?: string
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  icon?: object | any
}>(), {
  icon: MagicStick
})
</script>

<style scoped>
.label-container {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tip-icon {
  color: #909399;
  cursor: help;
  transition: color 0.2s;
}

.tip-icon:hover {
  color: #409eff;
}
</style>

